<template>
  <div class="todo-footer">
    <button class="delete-all" @click="deleteAll">清空全部事项</button>
    <button class="delete-complete" @click="deleteCompleteTodos">清除已完成事项</button>
  </div>
</template>

<script>
export default {
  props: {
    todos: Array,
    deleteAll: Function,
    deleteCompleteTodos: Function
  },
  computed: {
    completeSize() {
      return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete ? 1 : 0), 0)
    },
    isAllCheck: {
      get() {
        return this.completeSize === this.todos.length && this.completeSize > 0
      },
      set(value) {
        this.selectAllTodos(value)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.todo-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
button {
  height: 30px;
  width: 140px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  color: #eb4d4b;
  background-color: #f5f6fa;
  transition: 0.3s;
}
.delete-all:hover {
  color: #f5f6fa;
  background-color: rgba(235, 77, 75, 1);
}
.delete-complete:hover {
  color: #f5f6fa;
  background-color: rgba(255, 121, 121, 1);
}
</style>
